"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var App = /*#__PURE__*/function (_React$Component) {
  function App() {
    var _this;
    _classCallCheck(this, App);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, App, [].concat(args));
    _defineProperty(_this, "state", {
      tabs: [{
        label: "Display Traveller",
        key: "list"
      }, {
        label: "Add Traveller",
        key: "add"
      }, {
        label: "Del Traveller",
        key: "del"
      }, {
        label: "show",
        key: "show"
      }],
      curPage: "list",
      //当前页key
      seatNum: 20,
      //自定义设置
      travellerList: [{
        name: "lili",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12"
      }, {
        name: "hanmeimei",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12"
      }, {
        name: "soho",
        phone: "13111111111",
        cardId: "110111199011111111",
        createTime: "2025-03-03 12:12:12"
      }]
    });
    _defineProperty(_this, "handleTabChange", function (key) {
      _this.setState({
        curPage: key
      });
    });
    _defineProperty(_this, "handlePageChange", function (data) {
      switch (data.type) {
        case "add":
          if (_this.state.travellerList.length >= _this.state.seatNum) {
            alert("Sorry! Is Full!");
            return;
          }
          _this.state.travellerList.push(data.data);
          _this.setState({
            travellerList: _this.state.travellerList
          });
          break;
        case "del":
          _this.state.travellerList.splice(data.index, 1);
          _this.setState({
            travellerList: _this.state.travellerList
          });
          break;
        case "search":
          console.log(data);
          _this.state.travellerList.map(function (item) {
            if (item.name.indexOf(data.data.name) != -1) {
              item.hidden = false;
            } else {
              item.hidden = true;
            }
          });
          console.log(_this.state.travellerList);
          _this.setState({
            travellerList: _this.state.travellerList
          });
          break;
      }
    });
    return _this;
  }
  _inherits(App, _React$Component);
  return _createClass(App, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Ticket booking system"), /*#__PURE__*/React.createElement(Tab, {
        tabs: this.state.tabs,
        curPage: this.state.curPage,
        onChange: this.handleTabChange
      }), /*#__PURE__*/React.createElement(Page, {
        curPage: this.state.curPage,
        travellerList: this.state.travellerList,
        onChange: this.handlePageChange,
        seatNum: this.state.seatNum
      }));
    }
  }]);
}(React.Component);
var Head = /*#__PURE__*/function (_React$Component2) {
  function Head() {
    _classCallCheck(this, Head);
    return _callSuper(this, Head, arguments);
  }
  _inherits(Head, _React$Component2);
  return _createClass(Head);
}(React.Component);
var Tab = /*#__PURE__*/function (_React$Component3) {
  function Tab() {
    _classCallCheck(this, Tab);
    return _callSuper(this, Tab, arguments);
  }
  _inherits(Tab, _React$Component3);
  return _createClass(Tab, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        tabs = _this$props.tabs,
        curPage = _this$props.curPage,
        onChange = _this$props.onChange;
      return /*#__PURE__*/React.createElement("div", {
        className: "tab-container"
      }, tabs.map(function (item, index) {
        return /*#__PURE__*/React.createElement("span", {
          className: "tab " + (curPage === item.key ? "on" : ""),
          key: index,
          onClick: function onClick() {
            onChange(item.key);
          }
        }, item.label);
      }));
    }
  }]);
}(React.Component);
var Page = /*#__PURE__*/function (_React$Component4) {
  function Page() {
    var _this2;
    _classCallCheck(this, Page);
    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }
    _this2 = _callSuper(this, Page, [].concat(args));
    _defineProperty(_this2, "state", {});
    _defineProperty(_this2, "switchPage", function (_ref) {
      var curPage = _ref.curPage,
        travellerList = _ref.travellerList,
        onChange = _ref.onChange,
        seatNum = _ref.seatNum;
      switch (curPage) {
        case "list":
          return /*#__PURE__*/React.createElement(DisplayTraveller, {
            travellerList: travellerList,
            onChange: onChange
          });
        case "add":
          return /*#__PURE__*/React.createElement(AddTraveller, {
            onChange: onChange
          });
        case "del":
          return /*#__PURE__*/React.createElement(DelTraveller, {
            travellerList: travellerList,
            onChange: onChange
          });
        case "show":
          return /*#__PURE__*/React.createElement(Show, {
            travellerList: travellerList,
            seatNum: seatNum
          });
      }
    });
    return _this2;
  }
  _inherits(Page, _React$Component4);
  return _createClass(Page, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: "20px"
        }
      }, this.switchPage(this.props));
    }
  }]);
}(React.Component);
var DisplayTraveller = /*#__PURE__*/function (_React$Component5) {
  function DisplayTraveller() {
    var _this3;
    _classCallCheck(this, DisplayTraveller);
    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
      args[_key3] = arguments[_key3];
    }
    _this3 = _callSuper(this, DisplayTraveller, [].concat(args));
    _defineProperty(_this3, "state", {
      formData: {
        name: ""
      },
      list: []
    });
    _defineProperty(_this3, "handleSubmit", function (e) {
      e.preventDefault();
      _this3.search(_this3.state.formData.name);
    });
    _defineProperty(_this3, "search", function (name) {
      _this3.state.list.map(function (item) {
        if (item.name.indexOf(name) != -1) {
          item.hidden = false;
        } else {
          item.hidden = true;
        }
      });
      console.log(_this3.state.list);
      _this3.setState({
        list: _this3.state.list
      });
    });
    _defineProperty(_this3, "handleChange", function (e) {
      var _e$target = e.target,
        name = _e$target.name,
        value = _e$target.value;
      _this3.setState({
        formData: _defineProperty({}, name, value)
      });
    });
    _defineProperty(_this3, "onReset", function () {
      _this3.setState({
        formData: {
          name: "" // 使用计算属性名来更新状态
        }
      });
      _this3.search("");
      // this.props.onChange({
      //   type: "search",
      //   data: {
      //     name: "", // 使用计算属性名来更新状态
      //   },
      // });
    });
    return _this3;
  }
  _inherits(DisplayTraveller, _React$Component5);
  return _createClass(DisplayTraveller, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        list: JSON.parse(JSON.stringify(this.props.travellerList))
      });
    }
  }, {
    key: "render",
    value: function render() {
      var onChange = this.props.onChange;
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "search"
      }, /*#__PURE__*/React.createElement("form", {
        onSubmit: this.handleSubmit
      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("label", null, "name"), /*#__PURE__*/React.createElement("input", {
        type: "text",
        name: "name",
        value: this.state.formData.name,
        onChange: this.handleChange
      }), /*#__PURE__*/React.createElement("input", {
        type: "button",
        value: "reset",
        onClick: this.onReset
      }), /*#__PURE__*/React.createElement("input", {
        type: "submit",
        value: "search"
      })))), /*#__PURE__*/React.createElement(TravellerTable, {
        page: "list",
        onChange: onChange,
        travellerList: this.state.list
      }));
    }
  }]);
}(React.Component);
var TravellerTable = /*#__PURE__*/function (_React$Component6) {
  function TravellerTable() {
    var _this4;
    _classCallCheck(this, TravellerTable);
    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
      args[_key4] = arguments[_key4];
    }
    _this4 = _callSuper(this, TravellerTable, [].concat(args));
    _defineProperty(_this4, "handleDel", function (item, index) {
      _this4.props.onChange({
        type: "del",
        index: index,
        data: item
      });
    });
    return _this4;
  }
  _inherits(TravellerTable, _React$Component6);
  return _createClass(TravellerTable, [{
    key: "render",
    value: function render() {
      var _this5 = this;
      var _this$props2 = this.props,
        travellerList = _this$props2.travellerList,
        page = _this$props2.page;
      return /*#__PURE__*/React.createElement("table", {
        cellSpacing: "0",
        cellPadding: "0",
        border: "0"
      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Telephone"), /*#__PURE__*/React.createElement("th", null, "ID number"), /*#__PURE__*/React.createElement("th", null, "Booking Time"), page === "list" ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("th", null, "active"))), /*#__PURE__*/React.createElement("tbody", null, travellerList.map(function (item, index) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, !item.hidden || page === "del" ? /*#__PURE__*/React.createElement("tr", {
          key: index
        }, /*#__PURE__*/React.createElement("td", null, item.name), /*#__PURE__*/React.createElement("td", null, item.phone), /*#__PURE__*/React.createElement("td", null, item.cardId), /*#__PURE__*/React.createElement("td", null, item.createTime), page === "list" ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("a", {
          onClick: function onClick() {
            _this5.handleDel(item, index);
          }
        }, "delete"))) : /*#__PURE__*/React.createElement(React.Fragment, null));
      })));
    }
  }]);
}(React.Component);
function checkValue(data) {
  for (var key in data) {
    if (!data[key]) return false;
  }
  return true;
}
function todo(num) {
  return num < 10 ? "0" + num : num;
}
function getCurTime() {
  var date = new Date();
  var year = date.getFullYear(),
    month = todo(date.getMonth() + 1),
    day = todo(date.getDate()),
    hour = todo(date.getHours()),
    minute = todo(date.getMinutes()),
    second = todo(date.getSeconds());
  return "".concat(year, "-").concat(month, "-").concat(day, " ").concat(hour, ":").concat(minute, ":").concat(second);
}
var AddTraveller = /*#__PURE__*/function (_React$Component7) {
  function AddTraveller() {
    var _this6;
    _classCallCheck(this, AddTraveller);
    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
      args[_key5] = arguments[_key5];
    }
    _this6 = _callSuper(this, AddTraveller, [].concat(args));
    _defineProperty(_this6, "state", {
      formData: {
        name: "",
        phone: "",
        cardId: ""
      }
    });
    _defineProperty(_this6, "handleSubmit", function () {});
    _defineProperty(_this6, "onFormSubmit", function (e) {
      e.preventDefault();
      var onChange = _this6.props.onChange;
      var data = _this6.state.formData;
      if (!checkValue(data)) return;
      onChange({
        type: "add",
        data: _objectSpread(_objectSpread({}, _this6.state.formData), {}, {
          createTime: getCurTime()
        })
      });
      _this6.setState({
        formData: {
          name: "",
          phone: "",
          cardId: ""
        }
      });
    });
    _defineProperty(_this6, "handleChange", function (e) {
      var _e$target2 = e.target,
        name = _e$target2.name,
        value = _e$target2.value;
      _this6.setState({
        formData: _objectSpread(_objectSpread({}, _this6.state.formData), {}, _defineProperty({}, name, value))
      });
    });
    return _this6;
  }
  _inherits(AddTraveller, _React$Component7);
  return _createClass(AddTraveller, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("form", {
        onSubmit: this.onFormSubmit
      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("label", null, "name"), /*#__PURE__*/React.createElement("input", {
        required: true,
        type: "text",
        name: "name",
        value: this.state.formData.name,
        onChange: this.handleChange
      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("label", null, "phone"), /*#__PURE__*/React.createElement("input", {
        required: true,
        type: "number",
        name: "phone",
        value: this.state.formData.phone,
        onChange: this.handleChange
      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("label", null, "cardId"), /*#__PURE__*/React.createElement("input", {
        required: true,
        type: "number",
        name: "cardId",
        value: this.state.formData.cardId,
        onChange: this.handleChange
      })), /*#__PURE__*/React.createElement("input", {
        type: "submit",
        value: "Submit",
        onClick: this.handleSubmit
      })));
    }
  }]);
}(React.Component);
var DelTraveller = /*#__PURE__*/function (_React$Component8) {
  function DelTraveller() {
    _classCallCheck(this, DelTraveller);
    return _callSuper(this, DelTraveller, arguments);
  }
  _inherits(DelTraveller, _React$Component8);
  return _createClass(DelTraveller, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TravellerTable, _extends({
        page: "del"
      }, this.props)));
    }
  }]);
}(React.Component);
var Show = /*#__PURE__*/function (_React$Component9) {
  function Show() {
    var _this7;
    _classCallCheck(this, Show);
    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
      args[_key6] = arguments[_key6];
    }
    _this7 = _callSuper(this, Show, [].concat(args));
    _defineProperty(_this7, "state", {
      list: []
    });
    return _this7;
  }
  _inherits(Show, _React$Component9);
  return _createClass(Show, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var seatNum = this.props.seatNum;
      var list = [];
      for (var i = 0; i < seatNum; i++) {
        list.push(i);
      }
      this.setState({
        list: list
      });
    }
  }, {
    key: "render",
    value: function render() {
      var travellerList = this.props.travellerList;
      return /*#__PURE__*/React.createElement("div", {
        style: {
          display: "flex",
          justifyContent: "center"
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "seat-container"
      }, this.state.list.map(function (index) {
        return /*#__PURE__*/React.createElement("span", {
          key: index,
          className: travellerList[index] ? "on" : ""
        });
      })));
    }
  }]);
}(React.Component);
ReactDOM.render(/*#__PURE__*/React.createElement(App, null), document.getElementById("content"));